<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/citys.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/jquery.page.css"/>
</head>
<body>
<!--登录页面-->
	<div id="dl">
		<div id="title">
			<img src="images/001.jpg"/>
			<span>X</span>
		</div>
		<div id="dl1">
			<p>
				账号<input type="text" name="names" id="user" value="" />
			</p>
			<p>
				密码<input type="password" name="psw" id="psw" value="" />
			</p>
			<button>立即登录</button>
		</div>
		
	</div>
<!--注册页面-->
	<div id="zc">
		<div id="zctit">
			<img src="images/002.jpg"/>
			<span>X</span>
		</div>
		<div id="zccontent">
			<div id="zcleft">
				<p>
					<img src="images/006.jpg"/>
					<span>手机注册</span>	
				</p>
				<p><img src="images/005.jpg" style="background:white;"/>
					<span>邮箱注册</span>
				</p>
			</div>
<!--手机注册-->
			<div id="zcright">
				<p>
					手机<input type="text" name="names" id="zcphone" value=""/>
				</p>
				<p>
					密码<input type="text" name="psw" id="sjpsw" value=""/>
				</p>	
					
				<p>
					验证码<input type="text"  id="sjyzm" value=""/>
					<span class="yzm" style="width:80px;height:24px;border:1px #000 solid;display: inline-block;
    text-align: center;"></span>
				</p>
				
			<img src="images/004.jpg"/>	
			</div>
<!--邮箱注册-->
			<div id="zcright-1">
				<p>
					邮箱<input type="email" name="names" id="yx" value=""/><span id="cyyx"></span>
				</p>
				<p>
					密码<input type="text" name="psw" id="yxpsw" value=""/>
				</p>	
				<p>
					验证码<input type="text"  id="yxyzm" value=""/>
					<span class="yzm" style="width:80px;height:24px;border:1px #000 solid;display: inline-block;
    text-align: center;"></span>
				</p>		
			<img src="images/004.jpg"/>	
			</div>
		</div>
	</div>		
<!--tab切换出现的四个盒子-->
	<div id="xsj" class="a1">
				<p><span class="q1"></span></p>
			</div>
			<div id="xdn" class="a1">
				<div id="xdn1">
					<h5>热门问题</h5>
					<p></p>
				</div>
				<div id="xdn2">
					<h5>其他问题</h5>
					<p></p>
				</div>
			</div>
			<div id="msj" class="a1">
				<p></p>
			</div>
			<div id="messj" class="a1">
				<p></p>
			</div>
<!--点击切换城市 出现城市列表-->
	<div id="jsCityList">
		<div id="top"></div>
		<div id="content">
			<h3>城市列表 
				<span title="关闭" class="cityclose">X</span>			
			</h3>
			<div id="CityList">
				<ul>
					<li>
						<h4>热门</h4>
						<p>
							<a href="###">北京</a>
							<a href="###">上海</a>
							<a href="###">广州</a>
							<a href="###">天津</a>
							<a href="###">西安</a>
							<a href="###">深圳</a>
							<a href="###">武汉</a>
							<a href="###">成都</a>
							<a href="###">重庆</a>
							<a href="###">南京</a>
							<a href="###">沈阳</a>
							<a href="###">杭州</a>
							<a href="###">济南</a>
							<a href="###">郑州</a>
							<a href="###">青岛</a>
							<a href="###">苏州</a>
						</p>
					</li>
					<li class='er'>
						<h4>拼音</h4>
						<div class="spell">
							<a href="###" class="red">A</a>
							<a href="###">B</a>
							<a href="###">C</a>
							<a href="###">D</a>
							<a href="###">E</a>
							<a href="###">F</a>
							<a href="###">G</a>
							<a href="###">H</a>
							<a href="###">J</a>
							<a href="###">K</a>
							<a href="###">L</a>
							<a href="###">M</a>
							<a href="###">N</a>
							<a href="###">O</a>
							<a href="###">P</a>
							<a href="###">Q</a>
							<a href="###">R</a>
							<a href="###">S</a>
							<a href="###">T</a>
							<a href="###">W</a>
							<a href="###">X</a>
							<a href="###">Y</a>
							<a href="###">Z</a>
						</div>
						<div class="citywrap">
							<p class="A" style="display: block;">
								<a href="###">安阳</a>
								<a href="###">安庆</a>
								<a href="###">安康</a>
								<a href="###">阿克苏</a>
								<a href="###">阿勒泰</a>
								<a href="###">鞍山</a>
								<a href="###">安西</a>
								<a href="###">安顺</a>
								<a href="###">阿里地区</a>
								<a href="###">阿拉善盟</a>
								<a href="###">阿坝</a>	
							</p>
							<p class="B" style="display: none;">
								<a href="#">北京</a>
							</p>
							<p class="C" style="display: none;">
								<a href="#">成都</a>
							</p>
							<p class="D" style="display: none;">
								<a href="#">大连</a>
							</p>
							<p class="E" style="display: none;">
								<a href="#">峨眉山</a>
							</p>
							<p class="F" style="display: none;">
								<a href="#">福州</a>
							</p>
							<p class="G" style="display: none;">
								<a href="#">广州</a>
							</p>
							<p class="H" style="display: none;">
								<a href="#">湖南</a>
							</p>
							<p class="J" style="display: none;">
								<a href="#">济南</a>
							</p>
							<p class="K" style="display: none;">
								<a href="#">昆山</a>
							</p>
							<p class="L" style="display: none;">
								<a href="#">洛阳</a>
							</p>
							<p class="M" style="display: none;">
								<a href="#">绵阳</a>
							</p>
							<p class="N" style="display: none;">
								<a href="#">南阳</a>
							</p>
							<p class="P" style="display: none;">
								<a href="#">平凉</a>
							</p>
							<p class="Q" style="display: none;">
								<a href="#">青岛</a>
							</p>
							<p class="R" style="display: none;">
								<a href="#">日照</a>
							</p>
							<p class="S" style="display: none;">
								<a href="#">上海</a>
							</p>
							<p class="T" style="display: none;">
								<a href="#">天津</a>
							</p>
							<p class="W" style="display: none;">
								<a href="#">上海</a>
							</p>
							<p class="X" style="display: none;">
								<a href="#">上海</a>
							</p>
							<p class="Y" style="display: none;">
								<a href="#">上海</a>
							</p>
							<p class="Z" style="display: none;">
								<a href="#">上海</a>
							</p>
						</div>
					</li>
				</ul>
					
					
				
					
				
			
					
									
					
				
			</div>
		</div>	
		<div id="bottom"></div>
	</div>
<!--在线客服-->
	<div id="mainbox">
		
		<div id="zcchat">
			
			<div id="header">
				<img src="images/111.jpg" alt="" />
				<span>X</span>
			</div>
			
			<div id="chatpane">
				<ul class="chatPanelList">
					<li class="magBox">
						<p class="leftName">360城城</p>
						<div class="msgDiv">
							<div class="msgText">
								<p>您好，请问您的问题我可以帮助您吗？</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			<div id="footer">
				<div class="text-layout">
					<textarea rows="5" cols="50" class="text">请简述您要回答的问题</textarea>
				</div>
				<div class='powBox'>
					<p class="pow">
						智齿客服
						<button class="send-btn">发送</button>
					</p>
				</div>	
			</div>	
			
		</div>		
	</div>		
<!--投诉建议-->	
	<div class="panel">
		<div class="panel-content">
			
			<div class="hd">
				<h3>投诉建议</h3>
			</div>
			
			<div class="bd">
				<div style="padding:20px;">
					"您好，如对我们的服务意见或建议，请发邮件至："
					<a href="#" style="text-decoration: none;
    color: #2e74d3;">tcb-fankui@bang.360.cn</a>
					"详细说明"
				</div>
			</div>
			
			<div class="ft">
				<div style="width:496px;">
					<button class="panel-btn">确定</button>
				</div>
			</div>
		</div>
	</div>
	
<!--头部-->	
	<header>
		
		<div id="hdleft">
			<ul>
				<li style="color:green;font-size:14px;">北京</li>
				<li class='citybtn'>【切换城市】</li>
				<li>同城帮首页</li>
			</ul>
		</div>
		
		<div id="hdright">
			<ul>
				<li class="register">登录</li>
				<li class="registers">注册</li>
				<li>我的订单</li>
				<li class="service">在线客服(9:00-21:00)</li>
				<li>客户服务</li>
				<li>论坛</li>
				<li style="color:red;" class="advice">投诉建议</li>
			</ul>
		</div>
	</header>
<!--导航-->
	<nav>
		<img src="images/010.png"/>
		<div id="nav-right">
			<ul>
				<li>
					<a href="###">
						二手优品
					</a>
				</li>
				<li>
					<a href="###">
						手机回收
					</a>
				</li>
				<li>
					<a href="###">
						手机维修
					</a>
				</li>
				<li>
					<a href="###">
						电脑维修
					</a>
				</li>
				<li>
					<a href="###">
						以旧换新
					</a>
				</li>
				<li>
					<a href="###">
						手机租用
					</a>
				</li>
			</ul>
		</div>
	</nav>
<!--轮播图-->
	<div id="lunbo">
		

		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	  </ol>
	
	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
	  	
	    <div class="item active ll">
	      <img src="images/2.png" alt="...">
	    </div>
	    <div class="item ll">
	      <img src="images/29.jpg" alt="...">
	    </div>
	    <div class="item ll">
	      <img src="images/23.jpg" alt="...">
	    </div>
	  </div>
	
	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
<!--hezi-->
	<ul id='banner-hz'>
		<li>
			<img src="images/3.png" alt="" />
			<span>修手机/电脑</span>
		</li>
		<li>
			<img src="images/4.png" alt="" />
			<span>修电脑</span>
		</li>
		<li>
			<img src="images/25.png" alt="" />
			<span>卖手机/电脑</span>
		</li>
		<li>
			<img src="images/25.png" alt="" />
			<span>买二手机/电脑</span>
		</li>
	</ul>
	
</div>
<!--内容-->
	<div id="main">

        <div id="sort">
            <ul class="sortUls">
                <li><a href="#">
                    <img src="images/1.jpg">
                </a></li>
                <li><a href="#">
                    <img src="images/8.jpg">
                </a></li>
                <li><a href="#">
                    <img src="images/15.png">
                </a></li>
                <li style="border: 0"><a href="#">
                    <img src="images/11.jpg">
                </a></li>
            </ul>
        </div>
        <div id="recycle">
            <div id="recycleIphone">
                <span>热门手机回收</span>
                <span class="more"><a href="#">
                    查看更多
                </a></span>
            </div>
            <div id="recycleMain">
                <div class="firstImg">
                    <img src="images/29.png">
                </div>
                <div id="iphoneImg">
                    <img src="images/39.png">
                    <img src="images/40.png">
                    <img src="images/41.png">
                    <img src="images/28.png">
                    <img src="images/13.png">
                </div>
            </div>
        </div>
        <div id="recycle2">
            <div id="recycleIphone2">
                <span>优品精选</span>
                <span class="more"><a href="#">
                    查看更多
                </a></span>
            </div>
            <div id="recycleMain2">
                <div class="firstImg2">
                    <img src="images/32.png">
                </div>
                <div id="iphoneImg2">
                    <img src="images/8.png">
                    <img src="images/9.png">
                    <img src="images/10.png">
                    <img src="images/12.png">
                    <img src="/images/38.png">
                </div>
            </div>
        </div>
        <div id="service">
            到店维修
        </div>
    </div>
<!--main结束 shopmain开始-->
    <div id="shopmain">
        <div id="shopmain_left">
        	
            <div class="serchAdd">
                <div class="checkcity">
                    辽阳
                </div>
                <div class="checkAdd">选择区县</div>
                <div class="textAdd">
                    <input type="text" class="textInput" placeholder="请输入您的位置查找附近商家">
                    <input type="button" class="textBtn" value="搜索">
                </div>
             </div>
             
            <div class="serchRanking">
                <ul class="ranking">
                    <li>默认排序</li>
                    <li>按成交量</li>
                    <li>按人气</li>
                    <span>
                        <input type="checkbox" >先行赔付
                    </span>
                </ul>
                <div class="maps">
                	<a href="###">
                		<img src="images/a1.png"/>
                		地图模式
                	</a>
                </div>	
            </div>    	
       
       	<div id="shopinfo">
<!--json获取-->            	
	        <div class="serchMain">
	        </div>
        <!--分页-->	
		<div id="page"></div>     		
		</div>
		
 		</div>
<!--shopmain_left结束-->    
	        <div id="shopmain_right">
	            <h3 class='shopTop'>商家好评榜</h3>
	            <div></div>
	        </div>
	</div>

<!--shopmain结束-->
<!--底部-->
    <div id="footer">
        <div id="footercenter">
            <div class="footTop">
                <div class="footlist">
                    <img src="images/38.png">
                    <ul class="footuls">
                        <li class="footlis1">购物指南</li>
                        <li class="footlis2"><a href="#">购物流程</a></li>
                        <li class="footlis2"><a href="#">用户注册</a></li>
                        <li class="footlis2"><a href="#">帮助文档</a></li>
                    </ul>
                </div>
                <div class="footlist">
                    <img src="images/29.png">
                    <ul class="footuls">
                        <li class="footlis1">支付方式</li>
                        <li class="footlis2"><a href="#">在线支付</a></li>
                        <li class="footlis2"><a href="#">当面付款</a></li>
                    </ul>
                </div>
                <div class="footlist">
                    <img src="images/38.png">
                    <ul class="footuls">
                        <li class="footlis1">销售服务</li>
                        <li class="footlis2"><a href="#"></a>投诉建议</li>
                    </ul>
                </div>
                <div class="footlist">
                <img src="images/38.png">
                <ul class="footuls">
                    <li class="footlis1">特色保障</li>
                    <li class="footlis2">360担保支付</li>

                </ul>
            </div>
                <div class="footlist">
                    <img src="images/38.png">
                    <ul class="footuls">
                        <li class="footlis1">特色保障</li>
                        <li class="footlis2"><a href="#">360担保支付</a></li>
                        <li class="footlis2"><a href="#">加盟同城帮</a></li>
                        <li class="footlis2"><a href="#">新闻采访/跨界</a></li>
                    </ul>
                </div>

            </div>
            <div class="footBottom">
                <div>
                    <span>客服电话：4000-399-360&nbsp;/&nbsp;010-53767360&nbsp;</span>
                    <span>&nbsp;&nbsp;投诉建议&nbsp;</span>
                    <span>&nbsp;&nbsp;网站地图&nbsp;</span>
                </div>
                <div>Copyright&nbsp;©&nbsp;2005-2017&nbsp;360.CN;&nbsp;All RightsReserved&nbsp;360安全中心</div>
                <div>京ICP备08010314号-19&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京公网安备110000000006号</div>
            </div>
        </div>
    </div>
<!--地图-->  
<div id="mappages">
	<div id="container" tabindex="0" style="width:600px;height:600px;margin:0 auto;">
	   	<span>X</span>
	</div>
	    <div id="page1"></div>
</div>   	

   
</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.page.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gongneng.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/baiduTemplate.js" type="text/javascript" charset="utf-8"></script>
<!--地图-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=4990cdab3c3380d07514c5681fe3c9ff"></script>
<script type="text/javascript">
	$.get("http://localhost:8023/data/haopingbang.json",function(data){
		$(".serchMain").html(baidu.template("bb",data));
		$("#shopmain_right div").html(baidu.template("hp",data));
	})
//地图
//显示地图
	var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.480983, 40.0958]
        });
//地图控件
	AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.Autocomplete'],
            function(){
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.OverView({isOpen:true}));
                 autocomplete= new AMap.Autocomplete({                        
                      city: "", //城市，默认全国
                    });
      });
 //到店维修分页换页     
 var serchMain = document.querySelector(".serchMain");
 $(function() {
			$("#page").Page({
				totalPages: 8,//分页总数
				liNums:8,//分页的数字按钮数(建议取奇数)
				activeClass:'activP',//active 类样式定义
				callBack: function(page){
					var xhr = new XMLHttpRequest();
					xhr.open("GET", "http://localhost:8023/data/dianpu/dianpu"+page+".json",true)
					xhr.send()
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var obj = JSON.parse(xhr.responseText)
								serchMain.innerHTML = 											baidu.template("bb",obj)
								console.log(obj)
							}
						}
					}
				}
			})
		})

</script>	
<script type="text/html" id="bb">
	<%for(var i=0; i<shop_data.length; i++){%>
		
		<div class="serchLeft">
			
	                        <div class="serchImg">
	                           <img src="<%=shop_data[i].shop_ico%>">
	                        </div>
	                        
	                        <ul class="shopInfo">
	                            <li class="shopli1"><a href="#"><%=shop_data[i].shop_name%></a><span>店铺等级<img src="images/20.png"></span></li>
	                            <li class="shopli2">主营<span><%=shop_data[i].main%></span></li>
	                            <li class="shopli3">地址<span><%=shop_data[i].addr_detail%></span></li>
	                        </ul>
	                        
	          <div class="shopIn">进入店铺</div>             
	                    </div>
	                   
	<%}%>	
	
	                    
	                
</script>
<script type="text/html" id="hp">
	<%for(var i=0; i<shop_data.length; i++){%>
		<div class="cont-list">
			<div class="hpb">
	                	<div class="red_1"><%=i+1%></div>
	                	<div class="pic">
	                		<img src="<%=shop_data[i].shop_ico%>"></div>
	                	<div class="cont">
	                		<h6 class='green'><%=shop_data[i].shop_name%></h6>
	                		<p style='margin:0;
    padding:0;'><%=shop_data[i].shop_visit%>条评论</p>
	                	</div>	
	        </div>
		</div>
	<%}%>	
</script>		
</html>	
	                    
	                








